<template>
    <div class="heart">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/dataQuery/dataQuery' }">数据查询</el-breadcrumb-item>
        <el-breadcrumb-item
        ><a>用电查询</a></el-breadcrumb-item
      >
      </el-breadcrumb>
      <div class="search">
        <div>
            <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
        <el-input v-model="companyName" style="width:200px;"  placeholder="公司名称">

        </el-input>
        <el-input v-model="instruName" style="width:200px;" placeholder="设备名称">

        </el-input>
        <el-button type="primary" style="width: 80px;">查询</el-button>
      </div>
      <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      @sort-change="handleSort"
    >
    <el-table-column prop="a" label="设备名称" />
    <el-table-column prop="b" label="时间" />
    <el-table-column prop="c" label="A向电压(V)" />
    <el-table-column prop="d" label="B向电压(V)" />
    <el-table-column prop="e" label="C向电压(V)" />
    <el-table-column prop="f" label="A向电流(A)" />
    <el-table-column prop="g" label="B向电流(A)" />
    <el-table-column prop="h" label="C向电流(A)" />
    <el-table-column prop="i" label="有用功率(KW)" />
    <el-table-column prop="j" label="有用电能(KWh)" />
    </el-table>
    <div class="pagination">
      <Pagination v-model:page="page"  :total="total" @pagination="getData" />
    </div>
    </div>
      
  </template>
  <script lang="ts" setup>
  import { ref, watch, onMounted, reactive,  } from 'vue'
  import Pagination from '../../components/Pagination.vue'
    let timeRange =  ref()
    let companyName = ref("")
    let instruName = ref()
    onMounted(()=>{
      console.log(tableData.value)
    })
    const tableData = ref([
      {
        a:'设备1',
        b:'2024-5-8',
        c:'440',
        d:'440',
        e:'450',
        f:'30',
        g:'50',
        h:'60',
        i:'1000',
        j:'1200'
      },
      {
        a:'设备2',
        b:'2024-5-7',
        c:'440',
        d:'440',
        e:'450',
        f:'40',
        g:'20',
        h:'70',
        i:'1400',
        j:'1500'
      },
      {
        a:'设备3',
        b:'2024-5-6',
        c:'440',
        d:'430',
        e:'450',
        f:'32',
        g:'54',
        h:'65',
        i:'1060',
        j:'1230'
      },
      {
        a:'设备4',
        b:'2024-5-5',
        c:'445',
        d:'430',
        e:'410',
        f:'33',
        g:'54',
        h:'65',
        i:'1010',
        j:'1210'
      },
      {
        a:'设备5',
        b:'2024-5-4',
        c:'440',
        d:'440',
        e:'450',
        f:'30',
        g:'50',
        h:'60',
        i:'1000',
        j:'1200'
      },
      {
        a:'设备6',
        b:'2024-5-3',
        c:'450',
        d:'470',
        e:'452',
        f:'34',
        g:'60',
        h:'40',
        i:'1004',
        j:'1300'
      },

      {
        a:'设备7',
        b:'2024-5-2',
        c:'440',
        d:'440',
        e:'450',
        f:'30',
        g:'50',
        h:'60',
        i:'1000',
        j:'1200'
      },
      {
        a:'设备8',
        b:'2024-5-1',
        c:'440',
        d:'440',
        e:'450',
        f:'30',
        g:'50',
        h:'60',
        i:'1000',
        j:'1200'
      },
      {
        a:'设备9',
        b:'2024-4-30',
        c:'440',
        d:'454',
        e:'450',
        f:'45',
        g:'35',
        h:'64',
        i:'1000',
        j:'1200'
      },
      {
        a:'设备10',
        b:'2024-4-29',
        c:'440',
        d:'421',
        e:'434',
        f:'34',
        g:'45',
        h:'60',
        i:'1040',
        j:'1256'
      },
    ])
    interface Instrument {
      id: number,
      companyName: string,
      outputName: string,
      instrumentName: string,
      instrumentMIN: string,
      password: string,
      isUsing: boolean
    }
    let selected = ref<number[]>([])
    const handleSelectionChange = (a:Instrument[])=>{
      selected.value = [];
      a.forEach((row:Instrument)=>{
        selected.value.push(row.id)
      })
      console.log(selected.value)
    }
  
    let handleSort = (data: {column: any, prop: string, order: any })=>{
      console.log(data)
    }
    let currentPage = ref(1)
    let pageSize = ref(10)
    let total = ref(100)
    let page = ref(1)

  </script>
  <style>
    .heart{
      width: 95%;
      margin: 20px auto;
    }
    .search{
      margin-top: 50px;
      display: flex;
      justify-content: space-around;
    }
    .pagination{
      margin-top: 40px;
      display: flex;
      justify-content: center;
    }
  </style>